import React, { lazy, Suspense, useReducer, useState, type JSX } from 'react'
/* import Home from './pages/Home'
import Sublist from './pages/Sublist'
import My from './pages/My' */
import Details from './pages/Details'
import Login from './pages/Login'
import { Switch, Route, Redirect } from 'react-router-dom'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useHistory, useLocation } from 'react-router-dom'

import { reducer, initState } from './store/Reducer'
import Ctx from './store/Ctx'

//按需加载路由 首屏加载的时候 没有用到的资源 也会一次性加载出来 导致首屏速度加载缓慢
let Home = lazy(() => { return import('./pages/Home') })
let Sublist = lazy(() => { return import('./pages/Sublist') })
let My = lazy(() => { return import('./pages/My') })

//底部导航数据类型
interface appanvT {
  title: string,
  icon: JSX.Element,
  path: string
}



export default function App() {



  //底部导航数据
  let [appnav, setappnav] = useState<Array<appanvT>>([
    { path: '/home', title: '首页', icon: <HomeO /> },
    { path: '/sublist', title: '订阅', icon: <Search /> },
    { path: '/my', title: '我的', icon: <FriendsO /> },
  ])

  let history = useHistory()
  let location = useLocation()

  let [state, dispatch] = useReducer(reducer, initState)
  //console.log(state);

  //使用上下文传参

  return (<Ctx.Provider value={{
    ...state,
    dispatch
  }}>
    <div>
      {/* 配置路由  */}
      <Suspense fallback={<div>加载中...</div>}>
        <Switch>
          <Route path='/home' component={Home} />
          <Route path='/sublist' component={Sublist} />
          <Route path='/my' component={My} />
          <Route path='/details' component={Details} />
          <Route path='/login' component={Login} />
          <Redirect from='/' to='/home' />
        </Switch>
      </Suspense>

      {/* 导航组件 标签栏 点击显示对应的页面 */}
      <div className='demo-tabbar'>
        {/* location.pathname 当前访问到的路径 */}
        <Tabbar value={location.pathname} activeColor='red' onChange={(pt) => {
          //编程式跳转   
          history.push(pt as string)

        }}>
          {
            appnav.map(item => {
              return <Tabbar.Item key={item.path} name={item.path} icon={item.icon}>
                {item.title}
              </Tabbar.Item>
            })
          }
        </Tabbar>
      </div>
    </div >
  </Ctx.Provider>

  )
}
